<template>
  <div class="dynamic-table">
    <div class="add-btn">
      <q-button
        :disabled="addDisabled"
        type="primary"
        icon="qax-icon-Alone-Plus"
        @click="handleAdd"
      >
        增加一行
      </q-button>
    </div>

    <q-form
      ref="formRef"
      class="dynamic-form"
      :model="form"
      :disabled="disabled"
    >
      <VirtualScrollTable
        :buffer="30"
        :data="formData.tableData"
        :height="73"
        key-prop="_index"
        @change="(renderData) => (form.virtualList = renderData)"
      >
        <q-table
          ref="tableRef"
          :data="form.virtualList"
          class="edit-table w-full mt-8"
          height="360"
        >
          <q-table-column
            v-for="item in tableHeadData"
            :key="item.prop"
            v-bind="item"
          >
            <template #default="{ row, $index }">
              <q-form-item
                :prop="`virtualList.${$index}.${item.prop}`"
                :rules="{
                  required: item.required,
                  message: `${item.label}不能为空`,
                }"
              >
                <component
                  :is="item.component"
                  v-model="row[item.prop]"
                  v-bind="item.componentProps"
                />
              </q-form-item>
            </template>
          </q-table-column>
          <q-table-column label="操作" width="60">
            <template #default="scope">
              <q-button
                :disabled="!isCustomRow"
                icon="qax-icon-Trash"
                type="text"
                title="删除"
                size="medium"
                danger
                @click="handleDelete(scope.row._index)"
              />
            </template>
          </q-table-column>
        </q-table>
      </VirtualScrollTable>
    </q-form>
  </div>
</template>
<script>
import DynamicComponent from './dynamic-component';
import CustomSelect from './custom-select';
import VirtualScrollTable from './virtual-scroll-table';
import { cloneDeep } from 'lodash';

export default {
  name: 'DynamicTable',
  components: {
    DynamicComponent,
    CustomSelect,
    VirtualScrollTable,
  },
  props: {
    dataIds: {
      type: Array,
      default: () => [],
    },
    tableHeadData: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: true,
    },
    // 是否可以自定义增减行数
    isCustomRow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formData: {
        tableData: [],
      },
      form: {
        virtualList: [],
      },
    };
  },
  computed: {
    newRow() {
      const row = {};
      this.tableHeadData.forEach((item) => {
        // 多选要设置成[] 解决初次校验报错的问题
        row[item.prop] = item.componentProps?.multiple ? [] : '';
      });
      return row;
    },
    addDisabled() {
      return !this.isCustomRow || this.disabled;
    },
  },
  methods: {
    handleAdd() {
      this.formData.tableData.push({
        ...this.newRow,
        _index: this.formData.tableData.length,
      });
    },
    handleDelete(index) {
      const findIndex = this.formData.tableData.findIndex(
        (item) => item._index === index
      );
      this.formData.tableData.splice(findIndex, 1);
    },
    getValues() {
      const tableData = cloneDeep(this.formData.tableData);
      // 用索引设置dataId
      tableData.forEach((item, index) => {
        this.dataIds.forEach((key) => {
          item[key] = index + 1;
        });
      });
      return tableData;
    },
    setValues(data) {
      this.formData.tableData = data;
    },
    async validate() {
      return await this.$refs.formRef.validate();
    },
  },
};
</script>

<style lang="scss" scoped>
.dynamic-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  .add-btn {
    flex-shrink: 0;
  }
  .dynamic-form {
    margin-top: 16px;
    flex: auto;
  }
}

.edit-table {
  ::v-deep .q-table__row > td {
    padding-top: 8px;
    padding-bottom: 8px;
    height: inherit;

    /** 操作栏删除按钮 */
    // &:last-child {
    //   > .cell {
    //     margin-top: -20px;
    //   }
    // }
  }
}
</style>
